<template>
  <div class="container">
       <!-- 路径导航区域 -->
       <el-breadcrumb separator="/">
           <el-breadcrumb-item :to="{ path: '/main/index' }">首页</el-breadcrumb-item>
           <el-breadcrumb-item :to="{path:'/main/UserManagement'}">用户管理</el-breadcrumb-item>
           <el-breadcrumb-item :to="{path:'/main/RoleManagement'}">角色管理</el-breadcrumb-item>
           <el-breadcrumb-item :to="{path:'/main/MenuManagement'}">菜单管理</el-breadcrumb-item>
           <el-breadcrumb-item :to="{path:'/main/CompanyManagement'}">公司管理</el-breadcrumb-item>
       </el-breadcrumb>
       <!-- 搜索区域 -->
       <el-row>
       <el-form :inline="true" :model="formData">
       <el-form-item label="角色编码">
       <el-input clearable placeholder="请输入角色编码" v-model="formData.roleCode"></el-input>
       </el-form-item>
       <el-form-item label="角色名称">
       <el-input clearable placeholder="请输入角色名称" v-model="formData.roleName"></el-input>
       </el-form-item>
       <el-form-item>
       <el-button type="primary" @click="queryList">搜索</el-button>
       <el-button type="primary" @click="add1" :title="title">新增角色</el-button>
       <el-button type="danger" @click="removBatch">批量删除</el-button>
       </el-form-item>
       </el-form>
       </el-row>
       <!-- 数据表格区域 -->
       <el-table :data="tableData" border style="width: 100%"  @selection-change="handleSelectionChange" ref="multipleTableRef">
       <el-table-column type="selection" :selectable="selectable" width="55"></el-table-column>
       <el-table-column prop="id" label="ID" width="180"></el-table-column>
       <el-table-column prop="roleCode" label="角色编码" width="180"></el-table-column>
       <el-table-column prop="roleName" label="角色名称"></el-table-column>
       <el-table-column prop="description" label="描述"></el-table-column>
       <el-table-column label="操作">
       <template #default="scope">
       <el-button size="mini" type="primary" :title="title" @click="edit1(scope.row)">编辑</el-button>
       <el-button size="mini" type="danger" @click="remove(scope.row.id)">删除</el-button>
       </template>
       </el-table-column>
       </el-table>
       <!-- 分页区域 -->
       <div class="demo-pagination-block">
           <div class="demonstration"></div>
           <el-pagination
           v-model:current-page="pageNum"
           v-model:page-size="pageSize"
           :page-sizes="[5, 10, 20, 50]"
           :size="size"
           :disabled="disabled"
           :background="background"
           layout="sizes, prev, pager, next"
           :total="1000"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           />
       </div>
       <!--
       el-dialog: 对话框组件
       title: Dialog 的标题
       visible: 是否显示 Dialog，支持 .sync 修饰符
       -->
       <el-dialog :title="title"  v-model="dialogFormVisible" @close="cancle">
       <el-form  label-width="100px" ref="addOrUpdateForm">
       <el-form-item label="角色编码">
       <el-input v-model="roleData.roleCode" placeholder="请输入角色编码"></el-input>
       </el-form-item>
       <el-form-item label="角色名称">
       <el-input v-model="roleData.roleName" placeholder="请输入角色名称"></el-input>
       </el-form-item>
       <el-form-item label="角色描述">
       <el-input type="textarea" v-model="roleData.description"  placeholder="请输入角色描述"></el-input>
       </el-form-item>
       </el-form>
       <template #footer>
           <div class="dialog-footer">
             <el-button @click="cancle">取消</el-button>
             <el-button type="primary" @click="confirm">确定</el-button>
           </div>
         </template>
       </el-dialog>
       </div>
</template>
<script setup>
import { ref,onMounted,getCurrentInstance } from 'vue';
import { ElMessage } from 'element-plus';
import { ElMessageBox } from 'element-plus';

const currentInstance = getCurrentInstance()
const {$http}=currentInstance.appContext.config.globalProperties;
const tableData= ref([])
const dialogFormVisible = ref(false)
let title = ref()

//批量删除
const selectable = (row) => ![].includes(row.id)
const handleSelectionChange = (val) => {
formData.value.ids = val.map(item => item.id);
}

const formData = ref({
 roleCode:'',
 roleName:'',
 pageNum:1,
 pageSize:10,
 ids:[]
})

const roleData= ref({
 id:'',
 roleCode:'', 
 roleName:'', 
 description:''
})

onMounted(()=>{
 queryList();
});

function handleSizeChange(val) {
     formData.value.pageSize=val
     queryList();
}
function handleCurrentChange(val) {
     formData.value.pageNum=val
     queryList();
 }



function queryList(){
 console.log(tableData);
 $http({
   method:'get',
   url:'http://localhost:8081/sfzy/sysRole/page',
   params:formData.value
 }).then(res=>{
   tableData.value = res.data.data.list;
 })
}

function removBatch(){
       ElMessageBox.confirm('是否确认删除选中的数据?', '删除', 
           {
           confirmButtonText: '确认', // 确认按钮
           cancelButtonText: '取消', // 取消按钮
           type: 'warning',// 警告的图标
           }
       )
       .then(() => {
         const idsArray = formData.value.ids;
         const idsStr = idsArray.join(",");
         console.log(idsStr);
         
          // 点击确认 删除操作
           $http({
               method:'delete',
               url:`http://localhost:8081/sfzy/sysRole?ids=${idsStr}`,
               data:{}
           }).then(res=>{
               if(res.status== 200){
                   ElMessage.success('删除成功')
                   // 判断当前页是否还有数据，如果没有则将页码减1
                   if (tableData.value.length === 0 && formData.value.pageNum > 1) {
                    formData.value.pageNum--;
               }
               // 清理ids参数
               formData.value.ids = [];
                   queryList();
               }else{
                   ElMessage.error('删除失败')
               }
           })
       })
       .catch(() => {
           ElMessage({
               type: 'info',
               message: "取消删除操作",
           })
})}
       
function remove(id){
       ElMessageBox.confirm('是否确认删除选中的数据?', '删除', 
           {
           confirmButtonText: '确认', // 确认按钮
           cancelButtonText: '取消', // 取消按钮
           type: 'warning',// 警告的图标
           }
       )
       .then(() => {
          // 点击确认 删除操作
           $http({
               method:'delete',
               url:`http://localhost:8081/sfzy/sysRole/${id}`,
                params:{}
           }).then(res=>{
               if(res.status== 200){
                   ElMessage.success('删除成功')
                   queryList();
               }else{
                   ElMessage.error('删除失败')
               }
           })
       })
       .catch(() => {
           ElMessage({
               type: 'info',
               message: "取消删除操作",
           })
})}

// 新增
function add1(){
 title.value = '新增角色'
 dialogFormVisible.value=true
}

function add(){
       $http({
           method:'post',
           url:'http://localhost:8081/sfzy/sysRole',
           data:roleData.value
       }).then(res=>{
           if(res.data.code== 200){
               ElMessage.success('添加成功')
           }else{
               ElMessage.success('添加失败')
           }
           //关闭添加 对话框
           dialogFormVisible.value= false;
           // 在做一次查询
           queryList();
           cancle();
         })
}
// 修改
function edit1(rowData){
 title.value = '修改角色'
 dialogFormVisible.value=true
 roleData.value=rowData
}

function edit(){
       $http({
           method:'put',
           url:'http://localhost:8081/sfzy/sysRole',
           data:roleData.value
       }).then(res=>{
           if(res.data.code== 200){
               ElMessage.success('修改成功')
           }else{
               ElMessage.success('修改失败')
           }
           //关闭添加 对话框
           dialogFormVisible.value= false;
           // 在做一次查询
           queryList();
           cancle();
         })
}

function confirm(){
 if(title.value=='新增角色'){
   add();
 }else{
   edit();
 }
}

//关闭
function cancle(){
 dialogFormVisible.value = false;
 roleData.value = {
   id:'',
   roleCode:'', 
   roleName:'', 
   description:''
   }
   queryList();
}
</script>

<style scoped>
  
</style>
 